<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
      <card-info></card-info>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="10" :lg="9" :xl="6" >
        <achv-ratio></achv-ratio>
      </el-col>
      <el-col :xs="24" :sm="12" :md="14" :lg="15" :xl="18" >
        <dept-achvs></dept-achvs>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <achv-overview></achv-overview>
      </el-col>
    </el-row>
  </div>


</template>
<script>
import CardInfo from './components/cardInfo.vue';
import AchvRatio from './components/achvRatio.vue';
import DeptAchvs from './components/deptAchvs.vue';
import AchvOverview from './components/achvOverview.vue';
export default {
  name: "Dashboard",
  components: {
    CardInfo,
    AchvRatio,
    DeptAchvs,
    AchvOverview,
  },
  data() {
    return {

    };
  },
  created() {

  },
  mounted() {

  },
  computed: {

  },
  watch: {


  },
  methods: {

  }
};
</script>
<style>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

}

</style>
